<template>
  <div class="container">
    <el-card class="box-card">
      <breadCrumb title="用户列表"></breadCrumb>
      <el-row :gutter="20" style="margin-bottom: 20px;">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-input type="text" placeholder="请输入内容" v-model="query"/>
            <el-button class="search" @click="doSearch"><i class="el-icon-search"></i></el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="showDialog =!showDialog;isEdit= false">添加用户</el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column width="50" type="index">
        </el-table-column>
        <el-table-column label="姓名" width="220">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" width="220">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.email }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="220">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色" width="220">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.role_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180">
          <template slot-scope="scope">
            <el-switch @change="doChange(scope.row.id, scope.row.mg_state)" v-model="scope.row.mg_state"
              active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)" icon="el-icon-edit"></el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)"
              icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top: 20px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum"
          :page-sizes="[2, 4, 6, 8]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!-- dialog  -->
    <my-dialog v-if="showDialog" @close="showDialog = $event" @doHander="doHander" :row="row" :isEdit="isEdit"></my-dialog>
  </div>
</template>

<script>
import { getUserList, putUserStatus, delUser } from '@/api/user'
import myDialog from './modules/myDialog.vue'
export default {
  name: 'ShoppingUserList',
  components: {
    myDialog
  },
  data () {
    return {
      query: '',
      isEdit: false,
      row: {},
      pagenum: 1,
      pagesize: 2,
      tableData: [],
      total: null,
      showDialog: false
    }
  },

  created () {
    this.getListUser()
  },
  methods: {
    // 搜索
    async doSearch () {
      const res = await getUserList({ query: this.query, pagenum: this.pagenum, pagesize: this.pagesize })
      console.log(res)
      this.total = res.data.total
      this.tableData = res.data.users
    },
    // 添加用户
    doHander () {
      this.showDialog = false
      this.pagenum = this.isEdit ? this.total / this.pagesize : this.total / this.pagesize + 1
      this.getListUser()
    },
    // 获取数据列表
    async getListUser () {
      const res = await getUserList({ query: '', pagenum: this.pagenum, pagesize: this.pagesize })
      this.total = res.data.total
      this.tableData = res.data.users
    },
    // put 更改状态
    async doChange (id, status) {
      console.log(id, status)
      await putUserStatus(id, status)
    },
    // 分页器
    handleSizeChange (val) {
      this.pagesize = val
      console.log(`每页 ${val} 条`)
      this.getListUser()
    },
    handleCurrentChange (val) {
      this.pagenum = val
      console.log(`当前页: ${val}`)
      this.getListUser()
    },
    handleEdit (row) {
      console.log(row)
      this.row = row
      this.isEdit = true
      this.showDialog = true
    },
    async handleDelete (id) {
      await delUser(id)
      this.pagenum = this.total / this.pagesize
      this.getListUser()
    }
  }
}
</script>

<style lang="less" scoped>
.bg-purple {
  position: relative;

  .search {
    position: absolute;
    top: 0;
    right: 0;
  }
}
</style>
